<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { getYdsl } from "../api";
var option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["教学用水", "安防设备用电", "生态用水", "生活用水"],
    textStyle: {
      color: "#C9D2FA",
    },
    itemGap: 2,
  },
  xAxis: [
    {
      type: "category",
      axisTick: { show: false },
      data: null,
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: null,
};
let warp = ref("");
let myChart;
onMounted(async () => {
  myChart = echarts.init(warp.value);
  let res = await getYdsl();
  console.log(res,'用电');
  option.series = res.data.data.result[0].series;
  option.xAxis[0].data = res.data.data.result[0].yAxis.data;
  option && myChart.setOption(option);
});
window.addEventListener("resize", function () {
  myChart.resize();
});
</script>
<template>
  <div ref="warp" style="width: 100%; height: 100%; margin-top: 0.2rem"></div>
</template>

<style></style>